<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" style="margin: 20px">
      <el-form-item label="姓名/电话号码">
        <el-input v-model="username" placeholder="输入姓名/电话号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="demo-form-inline" style="margin: 20px">
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="开始时间"
            v-model="date1"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">至</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="结束时间"
            v-model="date2"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit2">确认</el-button>
        <el-button type="primary" @click="reset">清除</el-button>
      </el-form-item>
      <el-button
        type="primary"
        style="margin-left: 500px"
        @click="dialogFormVisible = true"
        >新增</el-button
      >
      <el-button
        :loading="downloadLoading"
        type="primary"
        icon="el-icon-document"
        @click="handleDownload"
      >
        导出Excel
      </el-button>
    </el-form>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" width="55"> </el-table-column>
      <el-table-column prop="name" label="人员姓名" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="人员电话" width="180">
      </el-table-column>
      <el-table-column prop="investmentamount" label="投资金额">
        <template slot-scope="scope">{{
          scope.row.investmentamount | formatPrice
        }}</template>
      </el-table-column>
      <el-table-column prop="wxName" label="微信号"> </el-table-column>
      <el-table-column prop="share" label="收益分成">
        <template slot-scope="scope">{{
          scope.row.share | formatShare
        }}</template>
      </el-table-column>
      <el-table-column prop="entrytime" label="入伙时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/user/shareholderInfo/'+scope.row.id">
          <el-button size="mini"
            >详情</el-button
          >
          </router-link>
          <el-popconfirm title="确定删除吗？删除后不可恢复" @onConfirm="deleteSub" >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              slot="reference"
              style="margin-left:10px"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="新增股东信息" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        ref="form"
        style="width: 60%"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          :label-width="formLabelWidth"
          prop="phone"
          :error="errorMsg"
        >
          <el-input
            v-model="form.phone"
            autocomplete="off"
            @blur="checkPhone"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="微信名称"
          :label-width="formLabelWidth"
          prop="wxName"
        >
          <el-input v-model="form.wxName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电子邮箱"
          :label-width="formLabelWidth"
          prop="email"
        >
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="投资金额"
          :label-width="formLabelWidth"
          prop="investmentamount"
        >
          <el-input
            v-model="form.investmentamount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收益分成"
          :label-width="formLabelWidth"
          prop="share"
        >
          <el-input v-model="form.share" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="银行卡号"
          :label-width="formLabelWidth"
          prop="cardnumber"
        >
          <el-input v-model="form.cardnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="初始密码" :label-width="formLabelWidth">
          <el-input
            disabled
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="入伙时间"
          :label-width="formLabelWidth"
          prop="entrytime"
        >
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.entrytime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="addSub" :disabled="isDesabled"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      list: [],
      url: "http://localhost:8080/jiapei/user/shareholders",
      url2: "http://localhost:8080/jiapei/user/shareholders/excel",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      username: "",
      date1: "",
      date2: "",
      queryType: 0,
      downloadLoading: false,
      excelList: [],
      excelDate1: "",
      excelDate2: "",
      dialogFormVisible: false, //新增表单
      form: {
        name: "",
        wxName: "",
        phone: "",
        email: "",
        investmentamount: "",
        share: "",
        cardnumber: "",
        entrytime: "",
        password: "123456",
      },
      formLabelWidth: "100px", //新增表单长度
      errorMsg: "",
      isDesabled: false,
      deleteId:''
    };
  },
  methods: {
    load() {
      this.$axios
        .get(this.url, {
          params: {
            page: this.currentPage,
            limit: this.pageSize,
            userName: this.username,
            startDate: this.date1,
            endDate: this.date2,
            queryType: this.queryType,
          },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.load();
    },
    reset() {
      this.date1 = "";
      this.date2 = "";
    },
    onSubmit() {
      this.currentPage = 1;
      this.date1 = "";
      this.date2 = "";
      this.excelDate1 = "";
      this.excelDate2 = "";
      this.queryType = 0;
      this.load();
    },
    onSubmit2() {
      this.currentPage = 1;
      this.username = "";
      this.queryType = 1;
      this.excelDate1 = this.date1;
      this.excelDate2 = this.date2;
      console.log(this.excelDate1);
      console.log(this.excelDate2);
      this.load();
    },
    handleDownload() {
      this.$axios
        .get(this.url2, {
          params: {
            startDate: this.excelDate1,
            endDate: this.excelDate2,
          },
        })
        .then((res) => {
          console.log(res);
          this.excelList = res.data.data.list;
          this.downloadLoading = true;
          import("@/vendor/Export2Excel").then((excel) => {
            const tHeader = [
              "姓名",
              "手机号",
              "微信号",
              "电子邮箱",
              "投资金额",
              "收益分成",
              "银行卡号",
              "入伙时间",
              "创建时间",
            ];
            const filterVal = [
              "name",
              "phone",
              "wxName",
              "email",
              "investmentamount",
              "share",
              "cardnumber",
              "entrytime",
              "createtime",
            ];
            const list = this.excelList;
            const data = this.formatJson(filterVal, list);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              // filename: this.filename,
              // autoWidth: this.autoWidth,
              // bookType: this.bookType
            });
            this.downloadLoading = false;
          });
        });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addSub() {
      this.$axios
        .post("http://localhost:8080/jiapei/user/shareholders", this.form)
        .then((res) => {
          this.dialogFormVisible = false;
          this.resetForm("form");
          this.$message({
            showClose: true,
            message: "新增成功",
            type: "success",
          });
          this.load();
        });
    },
    checkPhone() {
      this.$axios
        .get("http://localhost:8080/jiapei/user/checkPhone", {
          params: {
            phone: this.form.phone,
          },
        })
        .then((res) => {
          if (res.data.code == 201) {
            this.errorMsg = "电话号码已存在";
            this.isDesabled = true;
          } else {
            this.errorMsg = "";
            this.isDesabled = false;
          }
        });
    },
    handleDelete(id) {
      this.deleteId=id;
    },
    deleteSub(){
      this.$axios.delete(`http://localhost:8080/jiapei/user/shareholders/${this.deleteId}`).then(res=>{
        this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.load();
      })
    }
  },
  filters: {
    formatPrice(arg) {
      return "￥" + parseFloat(arg / 10000).toFixed(2) + "万元";
    },
    formatShare(arg) {
      return arg * 100 + "%";
    },
  },

  created() {
    this.load();
  },
};
</script>

<style>
</style>